<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from "vue-router";
import { getFriendDetail } from "@/api/relation.ts";
import {ElMessage} from "element-plus"; // 仅保留获取详情的接口

// 获取当前用户ID
const getCurrentUserId = (): number => {
  const userId = localStorage.getItem('currentUserId')
  return userId ? Number(userId) : 6 // 默认用户ID（与登录逻辑一致）
}

const router = useRouter()
const contact = ref<any>({
  id: null, // 存储目标用户ID
  gender: '',
  avatar: '',
  username: '',
  wechatNumber: '',
  region: '',
  phone: '',
  videoAccount: ''
})

// 合并重复的onMounted，确保仅执行一次
onMounted(async () => {
  const id = router.currentRoute.value.query.id as string;
  console.log("获取到的好友ID：", id);
  if (id) {
    try {
      const res = await getFriendDetail(Number(id));
      if (res.data.code === 200) {
        contact.value = res.data.data; // 正确赋值用户信息（包含id）
      } else {
        alert(`获取失败：${res.data.msg}`);
      }
    } catch (error: any) {
      alert(`加载失败：${error.message}`);
    }
  }
});

// 交互方法
const onBack = () => router.back()  // 返回上一页
const onMore = () => router.push('') // 更多操作

// 点击添加到通讯录跳转到申请页（携带目标用户ID）
const addFriend = () => {
  const targetUserId = contact.value.id;
  if (!targetUserId) {
    ElMessage.warning('未获取到用户信息，请重试');
    return;
  }
  // 跳转并传递目标用户ID
  router.push({
    path: '/addFriendRequest',
    query: { toUserId: targetUserId.toString() }
  });
}
</script>

<template>
  <div class="contact-detail-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="back-btn" @click="onBack">
        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
      </div>
      <div class="header-title"></div>
      <div class="more-btn" @click="onMore">
        <svg t="1755661325805" class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" p-id="1247" width="200" height="200">
          <path d="M277.333333 512a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM576 512a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM810.666667 576a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="#000000" p-id="1248"></path>
        </svg>
      </div>
    </header>

    <!-- 基本信息区 -->
    <div class="profile-section">
      <div class="avatar-container">
        <img :src="contact.avatar" alt="头像" class="avatar" />
      </div>
      <div class="info-container">
        <div class="name-row">
          <span class="name">{{ contact.username }}</span>
          <!-- 性别标识（1=男，2=女，0=未知） -->
          <span class="star-icon">
            <svg t="1755661722709" class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg" p-id="8399" width="200" height="200">
              <path d="M511.42 68.267c-117.863 0-193.792 49.698-230.161 133.512-23.262 53.624-27.307 110.387-21.897 163.874l0.683 5.769c6.52 50.483 32.153 110.763 68.864 154.556l2.116 2.474-187.153 157.065a68.267 68.267 0 0 0-24.405 52.275v149.675a68.267 68.267 0 0 0 68.266 68.266h648.534a68.267 68.267 0 0 0 68.266-68.266V737.843l-0.12-4.028a68.267 68.267 0 0 0-24.404-48.384L694.955 531.012l2.85-3.123c38.178-43.486 62.464-101.7 70.485-161.126 7.236-53.931 2.168-116.532-23.518-170.701C706.56 115.422 629.3 68.267 511.42 68.267z m0 68.266c91.92 0 144.947 32.359 171.673 88.747 19.115 40.363 23.177 90.385 17.528 132.386-7.902 58.76-36.147 115.763-77.944 147.541a34.133 34.133 0 0 0-1.211 53.385l214.8 179.268v149.607H187.734V737.809l216.064-181.282a34.133 34.133 0 0 0-0.887-53.01c-39.134-30.685-70.776-97.057-75.605-144.759-4.352-42.888-1.076-89.122 16.588-129.809 25.515-58.828 76.8-92.416 167.527-92.416z" :fill="contact.gender === 1 ? '#007aff' : '#ff2d55'" p-id="8400"></path>
              <path d="M546.133 648.533V819.2h-68.266V648.533a34.133 34.133 0 1 1 68.266 0z" :fill="contact.gender === 1 ? '#007aff' : '#ff2d55'" p-id="8401"></path>
            </svg>
          </span>
        </div>
        <div class="wechat-id">{{ contact.wechatNumber }}</div>
        <div class="region">{{ contact.region }}</div>
      </div>
    </div>

    <!-- 功能列表 -->
    <ul class="feature-list">
      <li class="feature-item" @click="">
        <span class="feature-label">朋友资料</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="">
        <span class="feature-label">电话</span>
        <span class="feature-sub">{{ contact.phone }}</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="">
        <span class="feature-label">朋友权限</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="">
        <span class="feature-label">朋友圈</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
      <li class="feature-item" @click="">
        <span class="feature-label">视频号</span>
        <span class="feature-sub">{{ contact.videoAccount }}</span>
        <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </li>
    </ul>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button class="action-btn add-btn" @click="addFriend">
        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6v8c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2zm-6-4c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3s3-1.34 3-3V5c0-1.66-1.34-3-3-3z"/>
        </svg>
        添加到通讯录
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 页面容器 */
.contact-detail-page {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn, .more-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon {
  width: 22px;
  height: 22px;
  color: #333;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
}

/* 头像区 */
.profile-section {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.avatar-container {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.star-icon {
  margin-left: 8px;
}

.star-icon .icon {
  color: #ffd700; /* 金色标星 */
}

.wechat-id, .region {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

/* 功能列表 */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  flex: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item:hover {
  background-color: #f5f5f5;
}

.feature-label {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.feature-sub {
  margin: 0 8px;
  font-size: 14px;
  color: #666;
}

.arrow-icon {
  color: #999;
  width: 20px;
  height: 20px;
}

/* 操作按钮（微信绿风格） */
.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: #f7f7f7;
}

.action-btn {
  width: 100%;
  max-width: 320px;
  height: 48px;
  margin: 8px 0;
  padding: 0 16px;
  background-color: #07c160; /* 微信主题绿 */
  border: none;
  border-radius: 24px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: #06b054; /* 深绿 hover 效果 */
}

.action-btn .icon {
  margin-right: 8px;
  color: #fff; /* 图标白色 */
}
</style>